<template>
	<view :class="['content', tabSwitch ? 'scroll' : '']">
		<view class="itembox">
			<view class="item1" v-for="(item, index) in datas" :key="index">
				<view class="first-title-container">
					<view class="type_name">{{item.question_type_name}}</view>
					<view class="first-title">第{{ index + 1 }}题</view>
					<view @tap="checkElection(index, item.question_id, item.question_title, item.question_typeid)" :class="{ active_election: !item.status }"
					 class="election">
						<view v-if="!item.status">加入资源车</view>
						<view v-if="item.status">移出资源车</view>
					</view>
				</view>
				<view class="topic-item1">
					<rich-text class="richtext-size" :nodes="item.question_title"></rich-text>
				</view>

				<view class="answer-item1" v-if="item.isshow && item.is_sub_question == 1">
					<view class="answer_text" v-if="item.question_typeid == 1 || item.question_typeid == 2" v-for="(aitem, aindex) in item.answer_list"
					 :key="aindex">
						<text>{{ aitem.text }}、</text>
						<rich-text :nodes="aitem.answer"></rich-text>
					</view>
					<view class="zanswer"><text>正确答案：</text>
						<rich-text :nodes="item.answer_text"></rich-text>
					</view>
					<view class="analysis_title">题目解析</view>
					<view class="analysis">
						<rich-text :nodes="item.question_analysis"></rich-text>
					</view>
				</view>
				<view class="sub_question" v-if="item.isshow && item.is_sub_question == 2" v-for="(subitem,sindex) in item.sub_questionList"
				 :key="sindex">
					<view class="sub_type">{{sindex+1}} 、 {{subitem.question_type_name}}</view>
					<view class="sub_title">
						<rich-text :nodes="subitem.question_title"></rich-text>
					</view>
					<view class="answer_text" v-if="subitem.question_typeid == 1 || subitem.question_typeid == 2" v-for="(aitem, aindex) in subitem.answer_list"
					 :key="aindex">
						<text>{{ aitem.text }}、</text>
						<rich-text :nodes="aitem.answer"></rich-text>
					</view>
					<view class="zanswer"><text>正确答案：</text>
						<rich-text :nodes="subitem.answer_text"></rich-text>
					</view>
					<view class="analysis_title">题目解析</view>
					<view class="analysis">
						<rich-text :nodes="subitem.question_analysis"></rich-text>
					</view>
				</view>
				<view class="bottom_look">
					<view class="iconfont iconjiantou look" :class="{ active_look: item.isshow }" @click="isshow(index)"></view>
				</view>
			</view>
			<uni-load-more v-if="datas.length > 7" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				questionType: [],
				con2Current: 0,
				reload: true,
				question_type_id: '',
				datas: [],
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: '没数据'
				},
				question_text: '全部题型',
				tabSwitch: false,
				quesNum: 0, // 选中题目总数
				textbook: 'renjiao',
				education: 9,
				sid: 161,
				knowsid: '',
				groupid: '',
				work_i: '',
				grade: 9 // 存储年级，以便跳转到设置题目分数时重新拿到
			};
		},
		props: {
			page: Number,
			status: String
		},
		components: {
			uniLoadMore
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				var data = {
					zid: this.knowsid,
					is_get_answer: 2,
					is_out_html: 2,
					sid: this.sid,
					lists_type: this.work_i,
					page: this.page,
					pagesize: 8,
					textbook: this.textbook
				};
				if (this.groupid != '') {
					data.groupid = this.groupid;
				}
				if (this.question_type_id != 0) {
					data.question_typeid = this.question_type_id;
				}
				this.$zapi.apiPost('user/question.Lists/questionList', data).then(res => {
					if (res.data.code == 200) {
						let questionList = res.data.data.data;
						questionList.forEach((item, key) => {
							item.isshow = false;
						});
						var f_question_string = res.data.data.f_question_string;
						if (f_question_string != '') {
							this.$zapi.apiPost('user/question.Lists/questionSublist', {
								parent_question_id: f_question_string,
								'is_get_answer': 2,
								'is_out_html': 2
							}).then(res => {
								var sub_questionList = res.data.data;
								questionList.forEach((item, key) => {
									if (item.is_sub_question == 2) {
										sub_questionList.forEach((val, k) => {
											if (Number(item.question_id) == Number(val.f_question_id)) {
												util.latex_reques(val.question_sub_lists, 'question_title'); //解析 试题标题 latex 公式转换
												util.latex_reques(val.question_sub_lists, 'question_analysis'); //解析 试题解析 latex 公式转换
												util.latex_answer(val.question_sub_lists, 'answer_list');
												util.setquestion(val.question_sub_lists);
												item.sub_questionList = val.question_sub_lists;
											}
										})
									}
								})
							});
						}
						this.datas = this.reload ? questionList : this.datas.concat(questionList);
						this.reload = false;
						this.status = 'more';
						util.latex_reques(this.datas, 'question_title'); //解析 试题标题 latex 公式转换
						util.latex_reques(this.datas, 'question_analysis'); //解析 试题解析 latex 公式转换
						util.latex_answer(this.datas, 'answer_list');
						util.setquestion(this.datas);
						console.log(this.datas);

						this.getselectList();
					} else {
						if (this.reload) {
							this.datas = [];
							uni.showToast({
								title: '还没有试题!',
								icon: 'none'
							});
						} else {
							this.status = 'noMore';
						}
					}
				});
			},
			getselectList() {
				var _this = this;
				this.$zapi.apiPost('user/Grade.Resource/HrLists').then(res => {
					var data = res.data;
					console.log(data);
					if (data.code == 200) {
						this.quesNum = data.data.length;
						for (let i = 0; i < this.datas.length; i++) {
							this.datas[i].status = false;
							for (let j = 0; j < data.data.length; j++) {
								if (this.datas[i].question_id == data.data[j].question_id) {
									this.datas[i].status = true;
								}
							}
						}
						this.$forceUpdate();
					} else {
						this.quesNum = 0;
					}
				});
			},
			con2ChangeOpt(item, index) {
				this.question_text = this.questionType[index].question_type_name;
				this.con2Current = index;
				this.reload = true;
				this.tabSwitch = false;
				this.page = 1;
				this.question_type_id = this.questionType[index].question_type_id;
				this.getList();
			},
			activeTab(index) {
				this.tabSwitch = !this.tabSwitch;
			},
			closeAll() {
				this.tabSwitch = false;
			},
			checkElection(index, question_id, question_title, question_type_id) {
				this.datas[index].status = !this.datas[index].status;
				if (this.datas[index].status) {
					this.$zapi
						.apiPost('user/Grade.Resource/addHr', {
							hr_name: question_title,
							hr_type: 1,
							question_id: question_id,
							question_type_id: question_type_id
						})
						.then(res => {
							console.log(res.data, '===');
							if (res.data.code == 200) {
								this.quesNum++;
								uni.showToast({
									title: '添加成功',
									icon: 'none'
								});
							}
						});
				} else {
					// 移除 题目
					this.$zapi
						.apiPost('user/Grade.Resource/delHr', {
							hr_type: 1,
							question_id: question_id
						})
						.then(res => {
							if (res.data.code == 200) {
								this.quesNum--;
								uni.showToast({
									title: '移除成功',
									icon: 'none'
								});
							}
						});
				}
			},
			isshow(index) {
				this.datas[index].isshow = !this.datas[index].isshow;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fafafa;
	}

	.scroll {
		overflow: hidden;
	}

	.bga {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}

	.content {
		height: 100%;
		width: 100%;
	}

	.component-box {
		position: fixed;
		display: flex;
		width: 750upx;
		height: 93upx;
		z-index: 1;
		align-items: center;
		background: white;
	}

	.item {
		display: flex;
		width: 100%;
		height: 100%;
		background: #ffffff;
		flex: 1;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #e5e5e5;
	}

	.item-title {
		color: #333333;
		font-size: 36upx;
		transition: all 0.3s;
	}

	.active-item-title {
		color: #00acfe;
	}

	.item:last-child {
		border: none;
	}

	.icon-styl {
		font-size: 48upx;
		color: #0d0408;
		transform: rotate(90deg);
		transition: all 0.3s;
		margin-left: 60upx;
	}

	.active-icon-styl {
		color: #00acfe;
		transform: rotate(-90deg);
	}

	.pop-bg {
		position: fixed;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
		top: 80upx;
		left: 0;
		right: 0;
		bottom: 0;
		height: 600upx;
		overflow-y: auto;
	}

	.bg-con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 93upx;
		padding-left: 30upx;
		padding-right: 30upx;
		border-bottom: 1px solid #e5e5e5;
		background-color: #ffffff;
	}

	.bg-con1:first-child {
		border-top: 1px solid #e5e5e5;
	}

	.opi-styl {
		color: #333333;
		font-size: 34upx;
	}

	.active-opi-styl {
		color: #00acfe;
	}

	.gougou-styl {
		color: #00acfe;
		font-size: 45upx;
	}

	.item1 {
		width: 100%;
		background: #ffffff;
		margin-top: 20upx;
		border-radius: 20upx;
	}

	.first-title-container {
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 20upx;
		box-sizing: border-box;
	}

	.type_name {
		font-size: 34upx;
		margin-left: 25upx;
		padding-left: 10upx;
		border-left: 5upx solid #00acfe;
		color: #999999;
		line-height: 1;
	}

	.first-title {
		font-size: 32upx;
		color: #333333;
	}

	.election {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160upx;
		background: #00adff;
		color: #ffffff;
		border-radius: 30upx;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.active_election {
		background: #ff9900;
	}

	.topic-item1 {
		margin-left: 20upx;
		font-size: 34upx;
		color: #333333;
		margin-top: 15upx;
		margin-right: 20upx;
	}

	.answer-item1 {
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 24upx;
		color: #666666;
		margin-top: 5upx;
		margin-bottom: 15upx;
	}

	.answer_text {
		font-size: 32upx;
		color: #666666;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10upx;
	}

	.zanswer {
		margin-top: 20upx;
		font-size: 32upx;
		color: #FF9900;
		display: flex;
		word-break: break-word;
	}

	.zanswer text {
		white-space: nowrap;
	}

	.analysis_title {
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		margin-top: 20upx;
		margin-bottom: 14upx;
	}

	.analysis {
		font-size: 32upx;
		color: #666666;
	}

	.richtext-size {
		font-size: 32upx;
	}

	.sub_question {
		width: 92%;
		margin-left: 5%;

		.sub_type {
			margin: 20upx 0upx;
			line-height: 1;
			font-size: 30upx;
			color: #999999;
		}

		.sub_title {
			font-size: 30upx;
			color: #333333;
		}

		.answer_text {
			font-size: 30upx;
			color: #666666;
			line-height: 60upx;
		}

		.zanswer {
			font-size: 30upx;
		}

		.analysis_title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin-top: 20upx;
			margin-bottom: 14upx;
		}

		.analysis {
			font-size: 30upx;
			color: #666666;
		}
	}

	.bottom_look {
		display: flex;
		justify-content: flex-end;
	}

	.look {
		width: 45upx;
		margin-right: 30upx;
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.active_look {
		transform: rotate(90deg);
	}
</style>
